﻿<%@ Control Language="C#" AutoEventWireup="true"  CodeBehind="ClientFileUploaderControl.ascx.cs" Inherits="Rison.Web.CommonPage.ClientFileUploaderControl" %>
<style type="text/css">
    a.addfile {
    background-image:url(<%= UrlBase%>/CommonPage/FileUploader/images/f1.gif);
    background-repeat:no-repeat;
    background-position:-823px -17px;
    display:block;
    float:left;
    height:20px;
    margin-top:-1px;
    position:relative;
    text-decoration:none;
    top:0pt;
    width:80px;
    }
    a.addfile:hover {
    background-image:url(<%= UrlBase%>/CommonPage/FileUploader/images/f1.gif);
    background-repeat:no-repeat;
    background-position:-911px -17px;
    display:block;
    float:left;
    height:20px;
    margin-top:-1px;
    position:relative;
    text-decoration:none;
    top:0pt;
    width:80px;
    }
</style>
   <script type="text/javascript" >
   
      
       
        //加载已有的文件
        function LoadFiles()
        {
            var valString = "<%= InitFileIds %>";
            var textString = "<%= InitFileNames %>";
            if(valString != "" && textString != "")
            {
                var values = valString.split("|");
                var texts = textString.split("|");
               
                InitFilesLable(values,texts);
            }
           
        }
		var fileIndex = 0;
        
        //初始化文件列表 参数：values文件Id数组，text文件显示名称数组
        function InitFilesLable(values,texts)
        {
            if(values.length!=texts.length)
            {
               alert("初始化文件列表出错！");
               return ;
            }
            
            for(var i=0;i<values.length;i++)
            {
                AddFileLabel(values[i],texts[i]);
            }
        }

		var fileIndex = 0;
     

        function fileChange(e)
        {
            //过滤文件类型
            if(FileExtFilter(e) == false)
            {
                return;
            }
                        
            //为input添加name属性，使之能被服务器端代码识别            
            e.name = 'file_' + fileIndex++;

            //在当前位置上添加新file控件
            var new_element = getNewFileInput();
            new_element.id = 'fileUploader' + fileIndex;            
           
            e.parentNode.insertBefore(new_element, e);
     
            //添加DeletableLabel控件
            AddFileLabel(e.id,getFileName(e.value));
            
            //隐藏该file控件            
            e.style.position = 'absolute';
            e.style.left = '-2000px';
            
        }

        //过滤文件类型和文件大小
        function FileExtFilter(e)
        {
//            var ext   =   "*.doc|*.xls";   
//            s   =   e.value.toLowerCase();  
//            s   =   s.substr(s.lastIndexOf("."));   
//            
//            if(ext.indexOf("*"+s)==-1)   
//            {   
//                alert("只能上传Word文档或Excel文档！");
//                
//                e.enabled = false;
//                e.value = "";
//                return false;
//            }   
            e.enabled = true;
        }
        


        function getFileName(path)
        {
            var lastIndex = path.toString().lastIndexOf('\\');
            return path.toString().substring(lastIndex+1);
        }


        //根据id删除fileinput
		function delInputFile(fileinputId) 
		{	
			var fileObj = document.getElementById(fileinputId);
			if (fileinputContainer != null && fileObj != null) 
			{
				fileinputContainer.removeChild(fileObj);
			}
		}
		
		//生成新的file控件
		function getNewFileInput()
		{
		   return document.createElement("<input style='cursor:pointer !important;height:18px;left:0px;filter:alpha(opacity=0); position:absolute;top:5px;width:1px;z-index: -1;' type='file' size='1' onchange='fileChange(this);' title='点击选择附件' hidefocus='true'/>");
		    		    
		}
	
	    //功能：添加显示的文件Label
	    //参数：fileinputId -> 对应file控件的id作为值；filename -> 显示的名称
	    function AddFileLabel(value,text)
	    {
		  
		    if ( filesTable.content == "empty" )
		    {
			    cell.removeChild(cell.firstChild);
			    filesTable.content = "notempty";
		    }

		    var sampleLabel = document.getElementById("sampleLabel").cloneNode(true);
		    var innerLabel = sampleLabel.firstChild;
		    innerLabel.value = value;
		    innerLabel.text = text;
		    innerLabel.ondelete = onDelete;
		    innerLabel.showImg = true;
		    innerLabel.imgSrc = "<%= UrlBase%>/CommonPage/FileUploader/images/i.p.attachfile.gif";
		    innerLabel.imgAlt = "资料文件";
		    innerLabel.backgroundColor="<%= BackgroundColor%>";
		    cell.appendChild(sampleLabel);

	    }
    	
	    //功能：删除时，连带删除当前Span
	    function onDelete()
	    {
	        //原来就有的文件被删除
	        if(this.value.toString().indexOf("fileUploader")< 0)
	        {
	            
	            var delInput = document.getElementById("deleteDiv").firstChild;
	            if(delInput.value != "")
	                delInput.value = delInput.value + "|";
	            delInput.value = delInput.value + this.value;    

	        }
	        else        //删除inputfile控件	  
	        {
	            delInputFile(this.value);
    	    }
    	     
		    if ( this.parentNode != null && this.parentNode.parentNode != null )
		    {
			    this.parentNode.parentNode.removeChild(this.parentNode);
    			
			    //若无file，显示无内容信息
			    if ( cell.childNodes.length <= 0 )
			    {
				    filesTable.content = "empty";
				    var emptyLabel = document.getElementById("emptyLabel").cloneNode(true);
				    cell.appendChild(emptyLabel);
			    }
		    }
	    }


	</script>
   
   <div style="width:100%;">
        <div id="deleteDiv">
            <input type="hidden" id="hdnDeleteFiles" runat=server  name="hdnDeleteFiles"/>
        </div>   
        
    	<table width="100%" cellpadding="2" cellspacing="1" border=0>
			
				<tr>	
				    <td>
				        <div>
				            <table>
				                <tr>
				                    <td>
				                    <a href="javascript:void(1==1);" class="addfile" style="cursor: default;" hidefocus="true" id="fileContainer">
<input id='fileUploader0' style="cursor:pointer !important;
height:18px;
left:0px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;" type='file' size='1' onchange="fileChange(this);" title='点击选择附件' hidefocus="true"/>
</a>
				                    </td>
				                    <td>
				                        （文件总大小不得超过4M！）
				                    </td>

				                </tr>
				            
				            </table>
				        
				        </div>
				    </td>				
					
				</tr>
		        <tr>
		            <td>                    		              
                       <div>
                            <?XML:NAMESPACE PREFIX="sfz" />
                            <?IMPORT NAMESPACE="sfz" IMPLEMENTATION="<%= UrlBase%>/CommonPage/FileUploader/DeletableValueLabel.htc" />

                            <div>
                                <table id="FilesTable" content="empty" border=0>
	                                <tr>
		                                <td><span>（请按需要选择上传文件）</span></td>
	                                </tr>
                                </table>
	                            <table style="display:none">
		                            <tr >
			                            <td id="sampleCell">
				                            <div id="sampleLabel">
					                            <sfz:DeletableValueLabel text="123"></sfz:DeletableValueLabel>
				                            </div>
				                            <div id="emptyLabel">
					                            （请按需要选择上传文件）
				                            </div>
			                            </td>
		                            </tr>
	                            </table>
                            </div>
                       </div>
		            </td>		
		        </tr>
				
			</table>
    </div>
    
<script type="text/javascript" >
	var filesTable = document.getElementById("FilesTable");
	var cell = filesTable.firstChild.firstChild.firstChild;
	var fileinputContainer = document.getElementById("fileContainer");
	window.onload = LoadFiles;
		
</script>
